/**
 * Created by qinrui on 2017/11/11
 * 员工分析
 */
import React, { Component } from "react";

//components
import SmartStack from "../../../components/LineChart/smartStack.jsx";
import SmartPie from "../../../components/LineChart/smartPie.jsx";

import { openLink } from "../../../utils/dingtalk";

export default class DataAnalysis extends Component {
    constructor (props) {
        super(props);
    }

    //响应不同尺寸手机到图表尺寸
    computeSmartPieWidth = () => {
        const clientWidth = document.body.clientWidth;
        let width = clientWidth / 3 / 1.6;
    
        if(clientWidth > 750 ){
            width = 750 / 3 / 1.2;
        } else if(clientWidth < 750){
            width = clientWidth / 3 / 1.5;
        }

        return width;
    }
    
    computeSmartStacktWidth = () => {
        const clientWidth = document.body.clientWidth;
        let width = clientWidth / 3 / 1.7;
    
        if(clientWidth > 750 ){
            width = 750 / 3 / 1.3;
        } else if(clientWidth < 750){
            width = clientWidth / 3 / 1.5;
        }

        return width;
    }
    
    /**
     * 取图表数据
     */
    getCharData = (data) => {
        const charData = [];

        if(data.length > 3){
            for(let i=0; i< 3; i++){
                charData.push(
                    { "yAxisData": data[i].typeNum, "xAxisData": data[i].typeName, "name": data[i].typeName}
                )
            }
        } else {
            for(let i=0; i< data.length; i++){
                const typeNum = data[i].typeNum / this.props.totalEmpNum
                charData.push(
                    {a: '1', b: Number(typeNum.toFixed(2)), c: data[i].typeName}
                )
            }
        }
        
        console.log("charData: ", charData)
        return charData;
    }

    render (){
        const { data=[] } = this.props;
        return (
            <div className="data-analysis">
                {
                    data.map((item,index) => (
                            <div className={`data-analysis-item ${item.data.length <= 3 && "smart-pie"}`}>
                                <div className="data-analysis-title">{item.name}</div>
                                <div className="data-analysis-chart" onClick={()=>{
                                    window._rlog(`_empanalyze_${item.type}`);
                                    openLink(`#/empAnalyzeDetail?anchor=${item.type}`);
                                    console.log(`#/empAnalyzeDetail?anchor=${item.type}`)
                                }}>
                                    {
                                        item.data.length > 3 ? 
                                        <SmartStack width={ this.computeSmartStacktWidth() } 
                                            height={ this.computeSmartStacktWidth() - 20 } 
                                            chartData = {this.getCharData(item.data)}
                                            size = {20}
                                            useTooltip={ false }/>
                                        :
                                        <SmartPie width={ this.computeSmartPieWidth()} 
                                            height={ this.computeSmartPieWidth()- 20 } 
                                            chartData = {this.getCharData(item.data)}
                                            useTooltip={ false }
                                            />
                                    }
                                </div>
                                
                            </div>
                        ))
                }
            </div>
        )
    }
}